<template>
  <div class="sw">
    <div class="nearby">
      <div class="carcle" v-for="(item,index) in Nearby" :key='index'>
        <div class="Scarcle">
          <img :src="item.titleImg" alt="">
        </div>
        <p class="p1">{{item.author}}</p>
        <p class="p2">{{item.city}}</p>
        <span class="time">关注</span>
        <div class="texts">
            <p>{{item.text}}</p>
        </div>
        <div class="Picture">
            <div class="imgss">
              <img :src="item.img" alt="">
            </div>
             <div class="imgss">
               <img :src="item.img" alt="">
             </div>
        </div>
      </div>
    </div>
    <div class="kong"></div>
  </div>
</template>

<script>
export default {
  data(){
    return{
     Nearby:[]
    }
  },
  mounted() {
    this.api.GetNearby()
    .then(data=>{
      //console.log(data.data.Nearby)
       this.Nearby=data.data.Nearby
    })
  },
};
</script>

<style lang="less" scoped>
.sw {
  width: 95%;
  margin: 0 auto;

  .nearby {
    width: 100%;
    // height: 5rem;
    // background: pink;
    .carcle {
      width: 100%;
      position: relative;
      margin-bottom: 0.3rem;
      .Scarcle {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: yellowgreen;
        margin: 0.2rem 0;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .p1 {
        color: #000;
        position: absolute;
        top: 0.1rem;
        left: 1.6rem;
        font-size: 15px;
      }
      .p2 {
        color: #666;
        font-size: 12px;
        position: absolute;
        top: 0.6rem;
        left: 1.6rem;
      }
      .time{
           position: absolute;
          top: 0.3rem;
          right: 0;
          font-size: 14px;
          color: #666;
      }
      .texts{
          width: 100%;
          height: 0.8rem;
          margin: 0.2rem 0;
          p{
         word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2; /** 显示的行数 **/
        overflow: hidden; /** 隐藏超出的内容 **/
        font-size: 12px;
        color: #333;
      
          }
      }
      .Picture{
          width: 100%;
          height: 3.5rem;
          background: #eee;
          .imgss:last-child{
                margin-right:0;
          }
        .imgss{
            width: 48%;
            height:100% ;
            // background: saddlebrown;
            float: left;
            margin-right: 0.2rem;
    img{
      width: 100%;
      height: 100%;
    }
        }
        
      }
    }
  }
  .kong{
    height: 2rem;;
  }
}
</style>